<template>
  <div>
    <el-checkbox-group v-model="check" @change="checkChange">
      <el-checkbox
        v-for="(item, index) in list"
        :key="field + index"
        :label="item[field + 'Code']"
        :style="{ width: width }"
      >
        {{ item[field + 'Name'] }}
      </el-checkbox>
    </el-checkbox-group>
  </div>
</template>

<script>
export default {
  model: {
    prop: 'value',
    event: 'checkStr'
  },
  props: {
    field: {
      type: String,
      default: ''
    },
    value: {
      type: String,
      default: ''
    },
    list: {
      type: Array,
      default() {
        return []
      }
    },
    str: {
      type: String,
      default: ';'
    },
    other: {
      type: String,
      default: '99'
    },
    nothing: {
      type: String,
      default: '98'
    },
    width: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      check: [],
      oldCheck: []
    }
  },
  watch: {
    value() {
      this.init()
    }
  },
  created() {
    this.init()
  },
  methods: {
    init() {
      if (this.value && this.value != null) {
        this.check = this.value.match(/;(\S*);/)[1].split(this.str)
        this.$emit('otherCheck', this.value.indexOf(this.other) > -1)
      } else {
        this.check = []
      }
      this.oldCheck = this.check
    },
    checkChange() {
      if (this.oldCheck.length === 1 && this.oldCheck[0] === this.nothing) {
        this.check = this.check.filter((item) => item !== this.nothing)
      } else if (this.check.indexOf(this.nothing) > -1) {
        this.check = [this.nothing]
      }

      const str = this.str + this.check.join(this.str) + this.str
      this.$emit('checkStr', str)
      this.$emit('change', str)
      this.$emit('nothing', str.indexOf(this.nothing) > -1)
      this.$emit('otherCheck', str.indexOf(this.other) > -1)
      this.oldCheck = this.check
    }
  }
}
</script>

<style scoped>
</style>
